<template>
    <AuthWrapper>
        <template #title>Login</template>
        <template #subtitle>在此处登陆您的账号</template>

        <form @submit.prevent="login">
            <div class="mb-1">
                <FloatingInput v-model="username" type="text" label="用户名" required />
            </div>
            <div class="mb-3">
                <FloatingInput
                    v-model="password"
                    type="password"
                    label="密码"
                    required
                    autocomplete="current-password"
                />
            </div>

            <button
                type="submit"
                class="btn btn-primary w-100 d-flex justify-content-center align-items-center"
                :disabled="loading"
            >
                <span
                    v-if="loading"
                    class="spinner-border spinner-border-sm me-2"
                    role="status"
                    aria-hidden="true"
                />
                登录
            </button>
        </form>

        <p class="mt-4 text-center text-muted small">
            还没有账号？<router-link to="/register">去注册</router-link>
        </p>
        <p class="mt-2 text-center text-muted small">
            <router-link to="/resetPassword">修改密码</router-link>
        </p>
    </AuthWrapper>
</template>

<script setup>
import FloatingInput from '../components/FloatingInput.vue';
import AuthWrapper from '../components/AuthWrapper.vue';
import { useLogin } from '../composables/useLogin';

// 使用封装的登录逻辑：这些变量是 在 useLogin() 函数内部通过 ref() 创建的响应式变量，然后通过 return 暴露出来，在组件中使用
const { username, password, loading, login } = useLogin();
</script>
